<template>
   <el-dialog v-model="dialog.show" :title="dialog.title" width="50%">
      <el-form :model="formData" :rules="rules" ref="formRef" label-width="100px">
         <el-form-item label="类型编号" prop="typeCode">
            <el-input v-model="formData.typeCode" :disabled="dialog.type!='insert'"></el-input>
         </el-form-item>
         <el-form-item label="类型名称" prop="typeName">
            <el-input v-model="formData.typeName" :disabled="dialog.type=='detail'"></el-input>
         </el-form-item>
         <el-form-item label="显示顺序" prop="showOrder">
            <el-input-number v-model="formData.showOrder" :disabled="dialog.type=='detail'" :min="0"></el-input-number>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
            <el-input v-model="formData.remark" type="textarea" :disabled="dialog.type=='detail'"></el-input>
         </el-form-item>
      </el-form>
      <template #footer>
         <el-button @click="dialog.show = false">关闭</el-button>
         <el-button type="primary" @click="mSaveData" v-if="dialog.type!='detail'">保存</el-button>
      </template>
   </el-dialog>
</template>
<script>
import axiosUtil from "@/utils/axiosUtil";

export default {
   data() {
      return {
         dialog: {
            show: false,
            title: '',
            type: ''
         },
         formData: {
            id: '',
            typeCode: '',
            typeName: '',
            showOrder: 100,
            remark: ''
         },
         rules: {
            typeCode: [{required: true, message: '类型编号不能为空', trigger: 'blur'}],
            typeName: [{required: true, message: '类型名称不能为空', trigger: 'blur'}],
            showOrder: [{required: true, message: '显示顺序不能为空', trigger: 'blur'}]
         }
      }
   },
   methods: {
      //显示对话框
      mShowDialog(type, row) {
         this.dialog.type = type;
         this.dialog.show = true;
         if (type == 'insert') {
            this.dialog.title = '新增图书类型';
            this.mClearData();
         } else if (type == 'update') {
            this.dialog.title = '修改图书类型';
            this.formData.id = row.id;
            this.mGetData();
         } else if (type == 'detail') {
            this.dialog.title = '图书类型详情';
            this.formData.id = row.id;
            this.mGetData();
         }
      },
      //获取详情数据
      mGetData() {
         axiosUtil.get({
            url: '/admin/bookType/getDetail',
            data: {
               id: this.formData.id
            },
            success: res => {
               Object.keys(this.formData).forEach((key) => {
                  this.formData[key] = res.data.entry[key];
               })
            }
         })
      },
      //清空数据
      mClearData() {
         this.$refs['formRef'].resetFields();
         this.formData.id = '';
         this.formData.typeCode = '';
         this.formData.typeName = '';
         this.formData.showOrder = 100;
         this.formData.remark = '';
      },
      //保存数据
      mSaveData() {
         this.$refs['formRef'].validate(valid => {
            if (valid) {
               let url = this.dialog.type == 'insert' ? '/admin/bookType/insert' : '/admin/bookType/update';
               axiosUtil.postJson({
                  url: url,
                  data: this.formData,
                  success: res => {
                     this.$message.info(res.data.msg);
                     this.dialog.show = false;
                     this.$emit('refleshData');
                  }
               })
            }
         })
      }
   }
}
</script>
<style>
</style>
